<template>
	<el-tabs type="border-card" class="card-tabs">
		<el-tab-pane>
			<template #label>
				<el-text size="default" type="success">
					<el-icon>
						<calendar />
					</el-icon>
					<span>打印历史记录</span>
				</el-text>
			</template>
			<div class="layout-padding-auto ">
				<el-table
					:data="state.dataList"
					highlight-current-row
					v-loading="state.loading"
					border
					height="100%"
					:cell-style="tableStyle.cellStyle"
					stripe
					:header-cell-style="tableStyle.headerCellStyle"
					ref="tableRef"
				>
					<el-table-column type="selection" width="40" align="center" />
					<el-table-column type="index" label="#" width="80" />
					<el-table-column prop="op" :label="$t('operation.Operation')" show-overflow-tooltip width="120">
						<template #default="scope">
							<el-button icon="Printer" type="primary" plain @click="printBarcode(scope.row)">{{ $t('btn.print') }} </el-button>
						</template>
					</el-table-column>
					<el-table-column prop="billCode" :label="$t('makeUp.makeUpNo')" show-overflow-tooltip width="150" />
					<el-table-column prop="creationTime" :label="$t('makeUp.creationTime')" show-overflow-tooltip width="200" />
					<el-table-column prop="barcode" :label="$t('makeUp.barcode')" show-overflow-tooltip width="200" />
					<el-table-column prop="materialCode" :label="$t('makeUp.materialCode')" show-overflow-tooltip width="200" />
					<el-table-column prop="materialName" :label="$t('makeUp.materialName')" show-overflow-tooltip width="200" />
					<el-table-column prop="materialSpec" :label="$t('makeUp.materialSpec')" show-overflow-tooltip />
				</el-table>
				<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
			</div>
		</el-tab-pane>
	</el-tabs>
</template>
<script setup lang="ts">
import { BasicTableProps, useTable } from '/@/hooks/table';
import { reactive, ref } from 'vue';
import { GetReceiptBarcodes, sendPrint } from '/@/api/platform/wms/reprintbarcode';
import { useI18n } from 'vue-i18n';
import { dicItemByCode } from '/@/api/platform/mes/screen';
import { useMessage } from '/@/hooks/message';

const state: BasicTableProps = reactive<BasicTableProps>({
	queryForm: {},
	pageList: GetReceiptBarcodes,
});

const { getDataList, currentChangeHandle, sizeChangeHandle, tableStyle } = useTable(state);
const tableRef = ref();
const printName = ref();

// 搜索变量
const queryRef = ref();
// 通过id进行子表的查询
const query = (makeUpNo: String) => {
	// 赋值查询参数
	state.queryForm.billCode = makeUpNo;
	// 刷新子表数据
	getDataList();
};

const printBarcode = (r) => {
	if (!printName.value) {
		useMessage().error('请选择打印机');
		return;
	}
	dicItemByCode({ code: 'printEquipAddress' }).then((res) => {
		let url = res.data[0].value;
		let data = {
			billCode: r.billCode,
			barCode: r.barcode,
			materialCode: r.materialCode,
			materialName: r.materialName,
			specification: r.materialSpec,
			produceDate: r.produceDate ? r.produceDate.slice(0, 10) : '',
			hostid: r.equipmentCode ? r.equipmentCode : '',
			num: r.checkQty,
			uuit: r.unit,
			printerName: printName.value,
		};
		sendPrint(url, data);
	});
};

const setPrintName = (print) => {
	printName.value = print;
};

// 暴露变量
defineExpose({
	query,
	setPrintName,
});
</script>
